<template>
  <div class="ma-content-block p-4">
    <!--搜索栏-->
    <div class="flex" style="margin-bottom: 12px">
      <a-tooltip content="请输入事件名称">
        <a-input
          v-model="formData.event_name"
          placeholder="请输入事件名称"
          allow-clear
          style="
            width: calc((100% - 64px) / 5);
            margin-right: 16px;
          "
        />
      </a-tooltip>
      <a-tooltip content="请输入负责人">
        <a-input
          v-model="formData.duty_id"
          placeholder="请输入负责人"
          allow-clear
          style="
            width: calc((100% - 64px) / 5);
            margin-right: 16px;
          "
        />
      </a-tooltip>
      <div class="flex">
        <a-button
          type="primary"
          @click="handleSearch"
          style="margin-right: 16px"
          >搜索</a-button
        >
        <a-button @click="handleResetting" style="margin-right: 16px"
          >重置</a-button
        >
      </div>
    </div>

    <!--表格-->
    <div class="" style="margin-bottom: 12px">
      <div class="sclBox">
        <div class=" cell" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
          <div class="flex align_center  justify_between" style="margin-bottom: 12px">
            <div class="flex" >
              <div style="margin-right: 10px">
                <a-tag color="blue">{{ item?.grade?.grade_name }}</a-tag>
              </div>
              <div style="margin-right: 10px">
                <a-tag color="blue">{{
                  handleEventype(item.event_type)
                }}</a-tag>
              </div>
              <!-- <div>
                <a-tag color="blue">建议</a-tag>
              </div> -->
            </div>
            <div class="flex justify_end">
              <a-tag
                :color="
                  item.handle_status == 1
                    ? '#86909c'
                    : item.handle_status == 2
                    ? '#ff5722'
                    : '#00b42a'
                "
                >{{
                  item.handle_status == 1
                    ? "待处理"
                    : item.handle_status == 2
                    ? "进行中"
                    : "已完成"
                }}</a-tag
              >
            </div>
          </div>
          <div class="flex">
            <div
              class="flex_1 "
              style="
                padding: 12px;
                border-radius: 10px;
                background: #f3f3f3;
                margin-right: 12px;
              "
            >
              <div class="flex align_center"  style="font-size: 16px; font-weight: 600; margin-bottom: 10px;">
                <div style="width: 4px;height: 18px;background: #1F6CEB;margin-right: 4px ;"></div>
                <div>事件描述</div>
              </div>
              <div class="flex"  >
                <div style="flex:1">
                  <div
                    style="
                      font-size: 12px;
                      color: rgba(0, 0, 0, 0.4);
                    "
                  >
                    {{ item.incident_text }}
                  </div>
                </div>
                <div class="flex flex_wrap justify_end" style="margin-left: 60px;width: 210px;">
                  <div
                    class="pointer"
                    style="margin-bottom: 10px; margin-right: 10px"
                    v-for="(items, indexs) in item.incident_image"
                    :key="indexs"
                  >
                    <a-image
                      width="160"
                      height="100"
                      :src="items.url"
                      @click.stop
                    />
                    <video
                      :src="items.url"
                      style="width: 60px; height: 60px"
                      v-if="items.type == 'video'"
                      @click.stop="handleVideo(items.url)"
                    ></video>
                  </div>
                </div>
              </div>
              
              <div class="flex" >
                <div style="color: rgba(0, 0, 0, 0.4); margin-right: 32px">
                  {{ item.created_at }}
                </div>
                <div style="">负责人：{{ item?.duty_id?.nickname }}</div>
              </div>
              
            </div>
            <div class="flex_1" style="padding: 12px;
                border-radius: 10px;
                background: #f3f3f3;">
              <div class="flex align_center"  style="font-size: 16px; font-weight: 600; margin-bottom: 10px">
                <div style="width: 4px;height: 18px;background: #1F6CEB;margin-right: 4px ;"></div>
                <div>事件描述</div>
              </div>
              <div v-if="item?.info != null"  class="flex">
                <div
                  style="
                    font-size: 12px;
                    margin-bottom: 1%;
                    color: rgba(0, 0, 0, 0.4);
                    flex:1;
                  "
                >
                  {{ item?.info?.condition_text }}
                </div>
                <div class="flex flex_wrap justify_end" style="margin-left: 60px;width: 210px;">
                  <div
                    class="pointer"
                    style="margin-bottom: 10px; margin-right: 10px"
                    v-for="(items, indexs) in item?.info?.incident_image"
                    :key="indexs"
                  >
                    <a-image
                      width="60"
                      height="60"
                      :src="items.url"
                      :preview="false"
                    />
                    <video
                      :src="items.url"
                      style="width: 60px; height: 60px"
                      v-if="items.type == 'video'"
                      @click.stop="handleVideo(items.url)"
                    ></video>
                  </div>
                </div>
              </div>
              <div v-else>
                <a-empty />
              </div>
              <div v-if="item?.info != null">{{ item?.info?.created_at }}</div>
            </div>
          </div>
          
          
          <div class="flex flex_column" style="padding: 0 16px">
            
            <div class="flex flex_wrap justify_center align_center flex_1">
              <!-- <div style="margin-right: 16px" v-if="item.handle_status == 2">
                <a-popconfirm
                  content="是否确定完成此事件?"
                  @ok="handleCompleted(item)"
                >
                  <a-link>完结</a-link>
                </a-popconfirm>
              </div>
              <div @click="handleDetail(item)">
                <a-link>查看</a-link>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify_end">
      <a-pagination
        :total="total"
        show-total
        show-jumper
        show-page-size
        @change="handlePageChange"
      />
    </div>
    <div class="more" v-if="isShowVideo" @click="handleColse"></div>
    <div class="video" v-if="isShowVideo">
      <video
        :src="videoUrl"
        controls
        :autoplay="true"
        style="width: 1000px; height: 562.5px"
      ></video>
    </div>

    <a-drawer :footer="false" :width="1000" v-model:visible="showDetail">
      <template #title> 事件详情 </template>
      <okdetail
        v-if="showDetail"
        :info="detailDeta"
        @shuaxin="handleResetting"
      />
    </a-drawer>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onActivated } from "vue";
import secureEventManage from "@/api/secure/secureEventManage";
import { Message } from "@arco-design/web-vue";
import okdetail from "./detail.vue";
import { request } from "@/utils/request.js";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
const value = ref();
const isShowVideo = ref(false);
const videoUrl = ref("");
const eventTypeList = ref([]);
const showDetail = ref(false);
const isShuaxin = ref(false);
const dataList = ref([]);
const detailDeta = ref({});
const total = ref(0);
const formData = ref({
  event_name: "",
  duty_id: "",
  page: 1,
  pageSize: 10,
});
const incident_image = ref([
  {
    type: "img",
    url: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
  },
  {
    type: "video",
    url: "https://wstsecure-api.chuangxing.ren/uploadfile/20241211/725376960599142401.mp4",
  },
]);
const handleEventype = (e) => {
  let name = "";
  eventTypeList.value.map((v, i) => {
    if (v.key == e) {
      name = v.title;
    }
  });
  return name;
};
onMounted(() => {
  handleDetailList();
  commonApi.getDict("event_type").then((res) => {
    eventTypeList.value = res.data;
  });
});
onActivated(() => {
  if (!isShuaxin.value) {
    handleDetailList();
  }
});
const handleResetting = () => {
  formData.value.page = 1;
  showDetail.value = false;
  handleDetailList();
};
const handleSearch = () => {
  formData.value.page = 1;
  handleDetailList();
};
const handlePageChange = (row) => {
  formData.value.page = row;
  handleDetailList();
};
const handleCompleted = (row) => {
  request({
    url: "secure/eventManage/Completed",
    method: "get",
    params: {
      id: row.id,
    },
  }).then((res) => {
    Message.success("完结成功！");
    formData.value.page = 1;
    handleDetailList();
  });
};
const handleDetail = (row) => {
  detailDeta.value = row;
  showDetail.value = true;
};
const handleDetailList = () => {
  secureEventManage.getList(formData.value).then((res) => {
    let _data = res.data.items;
    let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
    let videoRegex = /(mp4|avi|mov)/i;
    _data.map((v, i) => {
      let arr = [];
      let arrs = [];
      let type = "";
      if (v.incident_image) {
        arr = v.incident_image.split(",");
        arr.map((vv, ii) => {
          if (imageRegex.test(vv)) {
            type = "img";
          }
          if (videoRegex.test(vv)) {
            type = "video";
          }
          arrs.push({ url: vv, type });
        });
      } else {
        arrs = [];
      }

      if (v.info != null) {
        let infoUrl = [];
        let infoUrls = [];
        let types = "";
        if (v.info.incident_image) {
          infoUrl = v.info.incident_image.split(",");
          infoUrl.map((vvv, iii) => {
            if (imageRegex.test(vvv)) {
              types = "img";
            }
            if (videoRegex.test(vvv)) {
              types = "video";
            }
            infoUrls.push({ url: vvv, type: types });
          });
          v.info.incident_image = infoUrls;
        } else {
          v.info.incident_image = [];
        }
      }
      v.incident_image = arrs;
    });
    isShuaxin.value = true;
    dataList.value = _data;
    total.value = res.data.pageInfo.total;
  });
};

const handleVideo = (e) => {
  videoUrl.value = e;
  isShowVideo.value = true;
};
const handleColse = () => {
  isShowVideo.value = false;
};

const numberOperation = (newValue, id, numberName) => {
  secureEventManage
    .numberOperation({ id, numberName, numberValue: newValue })
    .then((res) => {
      res.success && Message.success(res.message);
    })
    .catch((e) => {
      // console.log(e);
    });
};

const switchStatus = (statusValue, id, statusName) => {
  secureEventManage
    .changeStatus({ id, statusName, statusValue })
    .then((res) => {
      res.success && Message.success(res.message);
    })
    .catch((e) => {
      // console.log(e);
    });
};

const options = reactive({
  id: "flyos_secure_event_manage",
  rowSelection: {
    showCheckedAll: true,
  },
  pk: "id",
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: "modal",
    width: 600,
  },
  api: secureEventManage.getList,
  recycleApi: secureEventManage.getRecycleList,
  // add: {
  //   show: true,
  //   api: secureEventManage.save,
  //   auth: ["secure:eventManage:save"],
  // },
  edit: {
    show: true,
    api: secureEventManage.update,
    auth: ["secure:eventManage:update"],
  },
  // delete: {
  //   show: true,
  //   api: secureEventManage.deletes,
  //   auth: ["secure:eventManage:delete"],
  //   realApi: secureEventManage.realDeletes,
  //   realAuth: ["secure:eventManage:realDeletes"],
  // },
  recovery: {
    show: true,
    api: secureEventManage.recoverys,
    auth: ["secure:eventManage:recovery"],
  },
  // import: {
  //   show: true,
  //   url: "secure/eventManage/import",
  //   templateUrl: "secure/eventManage/downloadTemplate",
  //   auth: ["secure:eventManage:import"],
  // },
  // export: {
  //   show: true,
  //   url: "secure/eventManage/export",
  //   auth: ["secure:eventManage:export"],
  // },
});

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入ID",
    },
  },
  {
    title: "事件名称",
    dataIndex: "event_name",
    formType: "input",
    search: true,
  },
  {
    title: "事件地点",
    dataIndex: "event_place",
    formType: "input",
    search: true,
  },
  {
    title: "事件等级",
    dataIndex: "event_grade",
    align: "center",
    formType: "select",
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: "secure/gradeManage/remote",
      // 指定组件接收的props
      props: { label: "grade_name", value: "id" },
      // 开启分页
      openPage: true,
      // 远程请求配置项
      remoteOption: {
        // 按用户名排序
        sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
        // 设置查询的字段
        select: ["id", "grade_name"],
        // 设置数据过滤
        filter: {},
        // 关联模型
        relations: [],
      },
    },
  },
  {
    title: "事件类型",
    dataIndex: "event_type",
    formType: "select",
    search: true,
    dict: {
      name: "event_type",
      props: {
        label: "title",
        value: "key",
      },
      translation: true,
    },
  },
  {
    title: "负责人",
    dataIndex: "duty_id",
    align: "center",
    formType: "select",
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: "system/user/remote",
      // 指定组件接收的props
      props: { label: "nickname", value: "id" },
      // 开启分页
      openPage: true,
      // 远程请求配置项
      remoteOption: {
        // 按用户名排序
        sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
        // 设置查询的字段
        select: ["id", "nickname"],
        // 设置数据过滤
        filter: {},
        // 关联模型
        relations: [],
      },
    },
  },
  {
    title: "事件描述",
    dataIndex: "incident_text",
    formType: "textarea",
    search: true,
  },
  {
    title: "事件图片",
    dataIndex: "incident_image",
    formType: "upload",
    type: "file",
    multiple: true,
    onlyData: true,
    returnType: "url",
  },
  {
    title: "处理状态",
    dataIndex: "handle_status",
    formType: "select",
    search: true,
    dict: {
      name: "sjclzt",
      props: {
        label: "title",
        value: "key",
      },
      translation: true,
    },
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true,
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true,
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true,
  },
]);
</script>
<style scoped lang="less">
.sclBox {
  max-height: 700px;
  padding: 12px;
  overflow: auto;
}
.sclBox::-webkit-scrollbar {
  display: none; /* 针对Webkit浏览器 */
}
.cell {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 0px;
  }
  .line {
    width: 1px;
    height: 100%;
    margin: 0 20px;
    background: rgba(0, 0, 0, 1);
  }
}
.pointer {
  cursor: pointer;
}
.more {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.video {
  width: 1000px;
  height: 562.5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
</style>
<script>
export default { name: "secure:eventManage" };
</script>
